<template>
	<view>

		<view class="faqList_box">
			<view class="faqList_con">
				<view class="faqItem" v-for="(item,index) in faqList" :key="index" @click="faqDetail(item.id)">
					<view class="faqTit">{{item.title}}</view>
					<u-icon name="arrow-right" color="#B5B5B5" size="28"></u-icon>
				</view>
				
			</view>

			<!-- 分页 -->
			<view class="dataEmpty_con">
				<!-- 数据为空 -->
				<u-empty v-if="faqList.length==0"></u-empty>
				<!-- 加载更多 -->
				<view class="loadmore_box" v-if="faqList.length>0">
					<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" />
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 分页
				pages: 1,
				limit: 10,
				last_page: 0,

				// 加载更多
				loadStatus: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '上拉或点击加载更多',
					loading: '努力加载中',
					nomore: '没有更多了'
				},

				// 帮助列表
				faqList: [],
				
				
			}
		},
		onLoad(option) {
			uni.showLoading({
				title: '加载中'
			});
			
		},
		onShow() {

		},
		onReady() {
			var _this = this;
			_this.pages = 1;
			_this.getFaqList();
		},
		onReachBottom() {
			var _this = this;
			_this.loadmore();
		},
		methods: {
			// 获取帮助列表
			getFaqList() {
				var _this = this;
				_this.$u.get('/api/article.index/getList', {
					pages: _this.pages,
					limit: _this.limit,
					cate:2,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取帮助列表==");
					console.log(res);
					var resData = res.data;
					var faqList = _this.faqList;
					if (_this.pages == 1) {
						faqList = [];
					}
					_this.faqList = faqList.concat(resData);

					// 分页状态更新
					_this.last_page = res.extend.last_page;
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loadmore';
				}).catch(res => {
					console.log(res);
				})
			},

			// 帮助详情
			faqDetail(id) {
				// console.log(id);
				uni.navigateTo({
					url: '/pagesOther/article/detail?id=' + id
				})
			},

			// 点击加载更多
			loadmore() {
				var _this = this;
				if (_this.pages >= _this.last_page) return;
				_this.loadStatus = 'loading';
				_this.pages++;
				setTimeout(() => {
					if (_this.pages >= _this.last_page) _this.loadStatus = 'nomore';
					else _this.loadStatus = 'loading';
					uni.showLoading({
						title: '加载中'
					});

					_this.getFaqList();
				}, 2000)
			},

		}
	}
</script>


<style scoped lang="scss">
	.faqList_box {
		overflow: hidden;
	}

	.faqList_con {
		overflow: hidden;
		width: 690rpx;
		margin: 0 auto;
		background-color:#F5F6F8;
		border-radius:20rpx;
	}

	.faqItem {
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #fff;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.faqTit {
		flex: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-right: 20rpx;
	}
</style>
